<html>
<head>
    <title>Sample DASH Player using Shaka Player</title>
    <!-- <script src="shaka-player.compiled.debug.js"></script> -->
    <!-- <script src="third_party/closure/goog/base.js"></script> -->
    <!-- <script src="dist/deps.js"></script> -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/shaka-player/2.0.5/shaka-player.compiled.debug.js"></script>

    <script src="app.js"></script>
    <script src="../presets.js"></script>
</head>
<body style="font-family: sans-serif;">

<table>
  <tr>
    <td>Preset</td>
    <td width=600>
      <select id="mpdList" onchange="app.onMpdChanged()">
      </select>
    </td>
  </tr>
  <tr>
    <td>DASH Manifest URL</td>
    <td>
      <input id="manifestUrlInput" type="text" size="96" oninput="app.onMpdCustom()"></input>
    </td>
  </tr>

  <tr>
    <td>DRM Config</td>
    <td>
      <select id="drmConfigList" onchange="app.onDrmConfigChanged()">
        <option value="default">[Default config from manifest and/or media]</option>
        <option value="override-url">Override License Server URL and/or HTTP headers</option>
        <option value="clearkey-override">Manually enter key</option>
      </select>
    </td>
  </tr>

  <tr>
      <td></td>
      <td width=600>
          <div id="override-drm-config">
              <table>
                  <tr><td>License Server URL</td><td><input type="text" id="licenseUrl" size="80"/></td></tr>
                  <tr><td>Extra HTTP Headers</td><td><input type="text" id="httpHeaders" size="80"/></td></tr>
              </table>
          </div>
          <div id="clearkey-drm-config">
              <table>
                  <tr><td>KID (hex)</td><td><input type=text id="kid" size="48"/></td></tr>
                  <tr><td>KEY (hex)</td><td><input type=text id="key" size="48"/></td></tr>
              </table>
          </div>
      </td>
  </tr>

</table>

<table>
    <tr><td>Supported EME DRMs:</td><td><div id="supportedDrms">NONE</div></td></tr>
</table>

<div id="log" style="color:red"></div>

<br>
<button onclick="app.loadStream();">Load stream</button>

<div>
  <video id="video"
         width="600" height="400"
         style="background-color:black"
         crossorigin="anonymous"
         autoplay controls>
  </video>
</div>

</body>
</html>
